<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrapper {
			  margin: 0 auto;
			  width: 90%;
			}
			
			.cards {
			  list-style: none;
			  margin: 0;
			  padding: 0;
			}
			
			.cards li {
			  border: 2px solid #490A3D;
			  border-radius:5px;
			  background-color: #BD1550;
			  color: #fff;
			  flex: 1 1 200px;
			}
			
			.cards h2 {
			  background-color: #490A3D;
			  margin: 0;
			  padding: 10px;
			}
			
			.cards p {
			  padding: 10px;
			}
			
			.flex {
			  display: flex;
			  flex-wrap: wrap;
			  margin: 0 -10px;
			}
			
			.flex li {
			  flex: 1 1 200px;
			  margin: 10px;
			}

		</style>
	</head>
	<body>
		<div class="wrapper">
		  <h1>Flexbox</h1>
		<ul class="flex cards">
		  <li><h2>Card 1</h2>
		    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
		    </p></li>
		  <li><h2>Card 2</h2>
		    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
		    </p></li>
		  <li><h2>Card 3</h2>
		    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
		    </p></li>
		  <li><h2>Card 4</h2>
		    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
		    </p></li>
		  <li><h2>Card 5</h2>
		    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
		    </p></li>
		  
		</ul>
		</div>		
	</body>
</html>
